<template>
	<view class="">
		<view class="tabbar">
		    <view class="tabbar-item"
		        v-for="(item, index) in list" 
		        :key="index" 
		        @click="tabbarChange(item.path,index)"
		    >
		        <image class="item-img" :src="item.icon_a" v-if="current == index"></image>
		        <image class="item-img" :src="item.icon" v-else></image>
		        <view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</view>
				<view class="unreadCount" v-if="unreadCount && index == 1">
					<template  v-if="unreadCount > 99">
						99+
					</template>
					<template  v-else>
						{{unreadCount}}
					</template>
				</view>
			</view>
		</view>
		<new-order />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
export default {
    props: {
        current: String
    },
	computed: {
		...mapState({
			allConversation: state => state.conversation.allConversation,
		})
	},
	watch:{
		allConversation(newVal,oldVal){
			newVal.forEach(item=>{
				this.unreadCount += item.unreadCount
			})
		}
	},
    data() {
        return {
            // paddingBottomHeight: 99,  //苹果X以上手机底部适配高度
			unreadCount:0,
            list: [{
                    text: '返回首页',  
                    icon: '/static/pages/image/shouyewdj_btn.png',  //未选中图标
                    icon_a: '/static/pages/image/shouyedj_btn.png',  //选中图片
                    path: "",  //页面路径
                },{
                    text: '客服',
					icon: '/static/pages/image/wodewdj_btn.png',
					icon_a: '/static/pages/image/wodedj_btn.png',
                    path: "recommendation",
                },{
                    text: '分类',
                    icon: '/static/pages/image/shouyewdj_btn.png',  //未选中图标
                    icon_a: '/static/pages/image/shouyedj_btn.png',  //选中图片
                    path: "recommendation",
                }
                ,{
                    text: '购物车',
                    icon: '/static/pages/image/shouchewdj_btn.png',
                    icon_a: '/static/pages/image/shouchedj_btn.png',
                    path: 'message',
                },
				// {
    //                 text: '商家列表',
    //                 icon: '/static/pages/image/wodewdj_btn.png',
    //                 icon_a: '/static/pages/image/wodedj_btn.png',
    //                 path: "user",
    //             },
				{
                    text: '我的',
                    icon: '/static/pages/image/wodewdj_btn.png',
                    icon_a: '/static/pages/image/wodedj_btn.png',
                    path: "user",
                }
            ]
        };
    },
    created() {
        let that = this;
        // uni.getSystemInfo({
        //     success: function (res) {
        //         let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
        //         model.forEach(item => {
        //             //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
        //             if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
        //                 that.paddingBottomHeight = 40;
        //             }
        //         })
        //     }
        // });
    },
	mounted() {
		this.allConversation.forEach(item=>{
			this.unreadCount += item.unreadCount
			// this.unreadCount += 1
		})
	},
    methods: {
        tabbarChange(path,index) {
			console.log(index);
			if(index == 0){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}else if(index == 1){
				uni.redirectTo({
					url:'/pagesA/news/news'
				})
			}else if(index == 2){
				uni.redirectTo({
					url:'/pagesA/tabber/b'
				})
			}else if(index == 3){
				uni.redirectTo({
					url:'/pagesA/tabber/c'
				})
			}
			// else if(index == 3){
			// 	uni.redirectTo({
			// 		url:'d'
			// 	})
			// }
			else if(index == 4){
				uni.switchTab({
					url:'/pages/mine/index'
				})
			}
            // uni.switchTab({
            //     url: path
            // })
        }
    }
};
</script>

<style lang="scss" scoped>
    .tabbarActive{
        color: #79D5AD !important;
    }
    .tabbar{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100rpx;
                background-color: #ffffff;
        .tabbar-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100rpx;
			position: relative;
			
            .item-img{
                margin-bottom: 4rpx;
                width: 46rpx;
                height: 46rpx;
            }
            .item-name{
                font-size: 26rpx;
                color: #A3A3A3;
            }
			
			.unreadCount{
				position: absolute;
				top: 0;
				right: -10px;
				color: #FFFFFF;
				z-index: 1;
				box-sizing: border-box;
				font-size: 12px;
				background-color: #fb5250;
				border-radius: 60upx;
				padding: 4upx 14upx 6upx;
			}
        }
    }
</style>